<template>
	<view v-if="vuex_isMobile" class="bg-m">
		<view class="index-content-m">
			<view class="index-right-title">
				您现在的位置：{{activeTopOneMenuName}} > {{activeTopTwoMenuName}}
			</view>
			<top-menu :secondMenu="secondMenu" :activename="activename" :activeTopOneMenuName="activeTopOneMenuName"
				@activeChange="activeChange" />
			<view class="index-right">
				<view class="expert-detail-m">
					<view class="expert-detail-box">
						<image :src="detailInfo.thumb" mode="" style="width: 270px;height: 378px;"></image>
						<view class="expert-detail-right">
							<view class="expert-detail-right-top">
								<view class="expert-detail-right-name">
									{{detailInfo.name}}
								</view>
								<view class="expert-detail-right-name1">
									{{detailInfo.deptName}}
								</view>
							</view>
							<view class="expert-detail-right-name1">
								{{detailInfo.jobTitleName}}
							</view>

						</view>
					</view>
					<view class="expert-detail-right-title">
						<view style="font-size: 54px;">
							<text class="main-color">专家</text>
							<text>简介</text>
						</view>
						<view class="index-title-border">
							<view class="left"></view>
							<view class="right"></view>
						</view>
					</view>
					<view class="expert-detail-right-dec">
						{{detailInfo.introduction}}
					</view>
				</view>
				<view class="foot-m">
					<view class="back" @click="back">
						{{`< 返回上一页`}}
					</view>
				</view>
			</view>
		</view>
		<foot-bar />
	</view>
	<view v-else class="bg">
		<view class="index-content">
			<left-menu :secondMenu="secondMenu" :activename="activename" :activeTopOneMenuName="activeTopOneMenuName"
				@activeChange="activeChange" />
			<view class="index-right">
				<view class="index-right-title">
					您现在的位置：{{activeTopOneMenuName}} > {{activeTopTwoMenuName}}
				</view>
				<view class="expert-detail">
					<view class="expert-detail-box">
						<image :src="detailInfo.thumb" mode="" style="width: 230px;height: 281px;"></image>
						<view class="expert-detail-right">
							<view class="expert-detail-right-top">
								<view class="expert-detail-right-name">
									{{detailInfo.name}}
								</view>
								<view class="expert-detail-right-name1">
									{{detailInfo.deptName}}
								</view>
							</view>
							<view class="expert-detail-right-name1">
								{{detailInfo.jobTitleName}}
							</view>
							<view class="expert-detail-right-title">
								<view style="font-size: 18px;">
									<text class="main-color">专家</text>
									<text>简介</text>
								</view>
								<view class="index-title-border">
									<view class="left"></view>
									<view class="right"></view>
								</view>
							</view>
							<view class="expert-detail-right-dec">
								{{detailInfo.introduction}}
							</view>
						</view>
					</view>
				</view>
				<view class="foot">
					<view class="back" @click="back">
						{{`< 返回上一页`}}
					</view>
				</view>
			</view>
		</view>
		<foot-bar />
	</view>
</template>

<script>
	import footBar from "@/pages/bottom/foot-bar.vue"
	import leftMenu from "@/pages/left/left-menu.vue"
	import topMenu from "@/pages/left/top-menu.vue"
	import {
		getMenu,
		getDeptExpertDetail
	} from "@/common/api.js";
	export default {
		components: {
			footBar,
			leftMenu,
			topMenu
		},
		data() {
			return {
				detailInfo: {},
				secondMenu: [],
				activename: '',
				activeType: '',
				activeTopOneMenuName: '',
				activeTopTwoMenuName: ''
			}
		},
		onLoad(option) {
			this.active = option.active
			let tabs = []
			const timer = setInterval(() => {
				tabs = uni.getStorageSync('tabs')
				if (tabs.length > 0) {
					for (var i in tabs) {
						if (this.active == tabs[i]['id']) {
							this.activeTopOneMenuName = tabs[i]['name']
							uni.setStorageSync('activeTopOneMenuName', tabs[i]['name'])
						}
					}
					uni.$emit('activeTo', this.active)
					getMenu({
						parentId: this.active
					}).then(response => {
						if (option.activeMenuType) {
							this.secondMenu = response.data
							this.activename = option.activeMenuName
							this.activeType = option.activeMenuType
							uni.setStorageSync('activeTopTwoMenuName', this.activeTopTwoMenuName)
							uni.setStorageSync('activeMenuName', this.activename)
							uni.setStorageSync('activeMenuType', this.activeType)
						} else {
							this.secondMenu = response.data
							this.activename = response.data[0].id
							this.activeType = response.data[0].tableName
							this.activeTopTwoMenuName = response.data[0].name
							uni.setStorageSync('activeTopTwoMenuName', this.activeTopTwoMenuName)
							uni.setStorageSync('activeMenuName', this.activename)
							uni.setStorageSync('activeMenuType', this.activeType)
						}

					})
					clearInterval(timer)
				}
			}, 100)
			let expertDetail = uni.getStorageSync('expertDetail')
			if (expertDetail) {
				this.detailInfo = expertDetail
			}
			getDeptExpertDetail({
				id: option.id
			}).then(res => {
				uni.setStorageSync('expertDetail', res.data)
				this.detailInfo = res.data
			})
			this.activeTopOneMenuName = uni.getStorageSync('activeTopOneMenuName')
			eventChannel.on('pageData', data => {
				this.secondMenu = data.data
				this.activename = data.data[0].id
				this.activeType = data.data[0].tableName
				this.activeTopTwoMenuName = data.data[0].name
				uni.setStorageSync('activeTopTwoMenuName', this.activeTopTwoMenuName)
				uni.setStorageSync('activeMenuName', this.activename)
				uni.setStorageSync('activeMenuType', this.activeType)
				// this.$nextTick(() => {
				// 	this.$refs.contentRef.getInfo(this.activename)
				// })
				// data即传过来的参数
			})
			// if (!this.activename) {
			// 	this.secondMenu = uni.getStorageSync('activeMenu')
			// 	this.activename = uni.getStorageSync('activeMenuName')
			// 	this.activeType = uni.getStorageSync('activeMenuType')
			// 	this.activeTopTwoMenuName = uni.getStorageSync('activeTopTwoMenuName')
			// 	// this.$nextTick(() => {
			// 	// 	this.$refs.contentRef.getInfo(this.activename)
			// 	// })
			// }
		},
		onShow() {},
		methods: {
			back() {
				uni.navigateBack()
			},
			activeChange(e) {
				this.activename = e.id
				this.activeType = e.tableName
				this.activeTopTwoMenuName = e.name
				uni.setStorageSync('activeTopTwoMenuName', this.activeTopTwoMenuName)
				uni.setStorageSync('activeMenuName', this.activename)
				uni.setStorageSync('activeMenuType', this.activeType)
				uni.navigateTo({
					url: '/pages/content?active=2&activeMenuName=' + this.activename + '&activeMenuType=' + this
						.activeType
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: auto;
		background: url(@/static/logo/bg.png);
		background-size: cover;
		background-repeat: no-repeat;
		padding: 20px 0;
	}

	.bg-m {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding: 20px 79px;
	}

	.index-content {
		width: 1200px;
		margin: auto;
		background-color: #FFFFFF;
		display: flex;

		.index-right {
			flex: 1;
			margin-top: 5px;
			margin-right: 20px;
			padding-bottom: 20px;
			background-color: #FFFFFF;
			min-height: 700px;

			.index-right-title {
				font-weight: 400;
				font-size: 12px;
				color: #686868;
				line-height: 20px;
				padding-top: 15px;
				cursor: pointer;
			}
		}
	}

	.index-content-m {
		width: 100%;
		background-color: #FFFFFF;

		.index-right-title {
			background-color: #193F93;
			font-weight: 400;
			font-size: 43px;
			color: #FFFFFF;
			line-height: 150px;
			padding-left: 72px;
			cursor: pointer;
		}

		.index-right {
			padding-bottom: 40px;
			background-color: #FFFFFF;
			min-height: 700px;


		}
	}

	.expert-detail {

		.expert-detail-box {
			display: flex;

			.expert-detail-right {
				flex: 1;
				margin-left: 40px;

				.expert-detail-right-name1 {
					font-weight: 400;
					font-size: 18px;
					color: #434343;
					line-height: 24px;
				}

				.expert-detail-right-top {
					display: flex;
					align-items: center;
					margin-bottom: 10px;

					.expert-detail-right-name {
						font-weight: 500;
						font-size: 28px;
						color: #434343;
						line-height: 37px;
						margin-right: 10px;
					}

				}

				.expert-detail-right-title {
					font-weight: 500;
					color: #434343;
					line-height: 24px;
					font-size: 18px;
					margin-top: 30px;

					.index-title-border {
						display: flex;

						.left {
							width: 40px;
							height: 1px;
							background: #193F93;
						}

						.right {
							width: 20px;
							height: 1px;
							background: #DCB67E;
						}
					}
				}

				.expert-detail-right-dec {
					font-weight: 400;
					font-size: 14px;
					color: #434343;
					line-height: 19px;
				}
			}
		}
	}

	.expert-detail-m {

		.expert-detail-box {
			display: flex;

			.expert-detail-right {
				flex: 1;
				margin-left: 43px;

				.expert-detail-right-name1 {
					font-weight: 400;
					font-size: 46px;
					color: #434343;
					line-height: 68px;
				}

				.expert-detail-right-top {
					display: flex;
					align-items: center;
					margin-bottom: 10px;

					.expert-detail-right-name {
						font-weight: 500;
						font-size: 72px;
						color: #434343;
						line-height: 104px;
						margin-right: 28px;
					}

				}


			}
		}

		.expert-detail-right-title {
			font-weight: 500;
			color: #434343;
			line-height: 77px;
			font-size: 54px;
			margin-top: 36px;
			margin-bottom: 36px;

			.index-title-border {
				display: flex;

				.left {
					width: 108px;
					height: 2px;
					background: #193F93;
				}

				.right {
					width: 54px;
					height: 2px;
					background: #DCB67E;
				}
			}
		}

		.expert-detail-right-dec {
			font-weight: 400;
			font-size: 43px;
			color: #434343;
			line-height: 63px;
		}
	}

	.foot {
		display: flex;
		justify-content: center;
		margin-top: 60px;

		.back {
			cursor: pointer;
			width: 134px;
			line-height: 40px;
			border-radius: 4px 4px 4px 4px;
			border: 1px solid #D8D8D8;
			text-align: center;
			font-weight: 400;
			font-size: 14px;
			color: #434343;
		}
	}

	.foot-m {
		display: flex;
		justify-content: center;
		margin-top: 108px;

		.back {
			cursor: pointer;
			width: 241px;
			line-height: 72px;
			border-radius: 7px;
			border: 2px solid #D8D8D8;
			text-align: center;
			font-weight: 400;
			font-size: 25px;
			color: #434343;
		}
	}
</style>